{{extend name="layout/base-html"}}

{{block name="body"}}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">

                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="keyWord" placeholder="请输入用户名|手机|邮箱" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>

                </div>
                <div class="layui-card-body ">
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="status">
    <input type="checkbox" {{# if(1 == d.id){ }}class="layui-disabled" disabled {{# } }} name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="action-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加管理员</button>
    </div>
</script>

<script type="text/html" id="action-button">
    <a href="javascript:;" lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
    {{# if(1 != d.id){ }}<a href="javascript:;" lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>{{# } }}
</script>

<script type="module">
    import { status, del, create, edit } from "/static/admin/js/api/additional/admin-user.js";
    import { rain } from "/static/admin/js/app.js";

    layui.use(['table', 'laydate'], () => {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate;


        // 时间筛选
        laydate.render({
            elem: "#start",
            type: "datetime"
        });

        laydate.render({
            elem: "#end",
            type: "datetime"
        });

        // 表格筛选
        table.render({
            ...rain.config.table

            ,toolbar: '#action-toolbar'
            ,defaultToolbar: []

            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名'}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'mobile', title: '手机号'}
                ,{field: 'create_time', title: '创建时间'}
                ,{field: 'update_time', title: '更新时间'}
                ,{field: 'status', title: '状态', templet: '#status', width: 100}
                ,{fixed: 'right', title:'操作', toolbar: '#action-button', width:150}
            ]],
            id: 'table-reload',
        });

        //监听状态操作
        form.on('switch(status)', function(obj){
            status(this.value, {
                status: obj.elem.checked ? 1 : 0
            }).then(res => {
                dialog(res.msg, () => {
                    // 失败则恢复选中状态
                    if(200 != res.code) {
                        obj.elem.checked = !obj.elem.checked;

                        form.render('checkbox');
                    }
                });
            });
        });

        // 初始化配置
        rain.tableAction.init = { form, table };

        // 筛选
        rain.tableAction.search('table-reload');

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;

            if(obj.event === 'del'){
                rain.tableAction.tool.del(layer, del, { data, obj });
            } else if(obj.event === 'edit'){
                edit(data.id);
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    create();
                    break;
            }
        });
    });


</script>
{{/block}}
